//引入路由的api
import {createRouter,createWebHashHistory} from 'vue-router'

//引入界面
const Home = () => import("../views/Home.vue")
const About = () => import("../views/About.vue")


const UserCenter =() =>import("../views/user-center/index.vue")
const UserProfile =() =>import("../views/user-center/profile.vue")
const UserSettings =() =>import("../views/user-center/Setting.vue")
const AccountList = () =>import("../views/AccountList.vue")


//引入ElementTest页面
const ElementTest = () => import("../views/ElementTest.vue")

//引入列表及分页
const ListDemo = () => import("../views/ListDemo.vue")

//引入Vuex
const VuePage = () => import("../views/Vuex.vue")


//路由配置
const routeConfig = [
    {path:'/', redirect:'/home'},
    {path:'/home', name:'home' ,component:Home},
    {path:'/about', name:'about' ,component:About},
    {
        path:'/account-list',
        name:'accountList',
        component:AccountList
      },
    {
        path:'/user',
        name:'userCenter',
        component:UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:"profile",
                name:"profile",
                component:UserProfile
            },
            {
                path:"setting",
                name:"setting",
                component:UserSettings
            },
        ],
    },
    //VuexPage路由配置
    {path:'/vuex', name:'vuex', component:VuePage},
    //ElementTest路由配置
    {path:'/element',name:'element',component:ElementTest},
    //list-demo
    {path:'/list-demo',name:'listDemo',component:ListDemo}
]

//创建实例化路由
const router = createRouter({
    history:createWebHashHistory(),
    routes:routeConfig
})

//对外暴露实例化路由
export default router